<script type="text/markdown" data-help-name="ui-template">
  (see [full docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html))

The content of `ui-template` is controlled by the "Type" property.

Provides a means to render custom content or a set of node-styles depending on scope.
- **Widget:** A Vue Component (including any <a href="https://vuetifyjs.com/en/components/all/" target="blank">
  Vuetify component</a>) that is rendered in the Dashboard.
- **CSS (All Pages):** Define custom CSS classes/styling that applies to the entire Dashboard.
- **CSS (Single Page):** Define custom CSS classes/styling that applies just a single page of your Dashboard

### Type: Widget
When the scope is set to **Widget**, the template will be rendered in the Dashboard as HTML.
You can render dynamic content using any VueJS data-binding expressions, (e.g. `v-if`, `v-for`)
and access incoming data to the node via the `msg` object, e.g:

<pre>
&lt;template&gt;
  &lt;div&gt;
      &lt;h2&gt;Counter&lt;/h2&gt;
      &lt;p&gt;Current Count: {{ count }}&lt;/p&gt;
      &lt;p class="test-class"&gt;Formatted Count: {{ formattedCount }}&lt;/p&gt;
      &lt;v-btn @click="increase()"&gt;Increment&lt;/v-btn&gt;
      &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
      data() {
          // define variables available component-wide
          // (in &lt;template&gt; and component functions)
          return {
              count: 0
          }
      },
      watch: {
          // watch for any changes of "count"
          count() {
              if (this.count % 5 === 0) {
                  this.send({payload: 'Multiple of 5'})
              }
          }
      },
      computed: {
          // automatically compute this variable
          // whenever VueJS deems appropriate
          formattedCount() {
              return `${this.count} Apples`
          }
      },
      methods: {
          // expose a method to our &lt;template&gt; and Vue Application
          increase() {
              this.count++
          }
      }
  }
&lt;/script&gt;

&lt;style&gt;
.test-class {
  color: red;
}
&lt;/style&gt;
</pre>

#### Built In Functions

The template comes with two built-in functions:

`send(msg)` -  Can be used to send a `msg` from the template, e.g:

```html
<v-btn @click="send({'hello': 'world'})"></v-btn>
```

`submit()` - Can be attached to a `<form />`. The `msg` sent will be an object
  representation of the `FormData` from the attached form, e.g:
```html
&lt;form @submit.prevent="submit"&gt;
    &lt;v-text-field name="first" label="First Name"&gt;&lt;/v-text-field&gt;
    &lt;v-text-field name="last" label="Last Name"&gt;&lt;/v-text-field&gt;
    &lt;v-btn type="submit"&gt;&lt;/v-btn&gt;
&lt;/form&gt;
```
Would send the following `msg` when submitted:
```js
{ "first": <value>, "last": <value> }
```

#### Sending on Click
Here, we call it when someone clicks our "Send Hello World" button:

```vue
<v-btn @click="send({payload: 'Hello World'})">Send Hello World</v-btn>
```

#### Sending on Change
Or another example, where the payload is automatically sent any time the `v-model` is changed:

```vue
<v-rating hover :length="5" :size="32" v-model="value"
    active-color="primary" @update:modelValue="send({payload: value})"/>
```

#### Reading Node Input

Whenever a `ui-template` receives a `msg` in Node-RED, that is automatically assigned to the `msg` variable in the template.

Additionally, we also bind a computed variable `value` to `msg.payload`. This means that you can access the `msg` object in your template, as well as binding the `value` variable to any widgets you use. 

Such an example would be:

```html
<div>
    <h2>Latest <code>msg</code> received:</h2>
    <pre>{{ msg }}</pre>
</div>
```

#### Vuetify Widgets

The `ui-template` node also has access to the [Vuetify component library](https://vuetifyjs.com/en/components/all/) by default. The library provides a large number of pre-built widgets that you can use in your Dashboard.

These are particularly useful as they provide easy access to a large number of pre-built widgets that aren't necessarily included in the core nodes of Node-RED Dashboard 2.0.

### Type - CSS (All Pages)
When the scope is set to **Site Scoped Style**, the CSS in the template will be added to the `head` of all pages.
e.g.
```css
.my-class {
  color: red;
}
```

### Type: CSS (Single Page)
When the scope is set to **Site Scoped Style**, the CSS in the template will be added to the `head` of the selected page.
e.g.
```css
.my-page1-only-class {
  color: green;
}
```

</script>